<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/assets/css/all.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/my.css" />

    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }


        .visit-hd {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: .64rem;
            background-color: #fff;
            margin-bottom: .08rem;
        }
        
        .visit-hd .res-wrapper {
            width: 40%;
        }
        
        .visit-hd .res-wrapper a {
            float: left;
            text-align: center;
            height: .32rem;
            line-height: .32rem;
            color: #fff;
            background-color: #dfdfdd;
        }
        
        .visit-hd .res-wrapper .me-come {
            width: 50%;
            border-top-left-radius: .16rem;
            border-bottom-left-radius: .16rem;
        }
        
        .visit-hd .res-wrapper .me-from {
            width: 50%;
            border-top-right-radius: .16rem;
            border-bottom-right-radius: .16rem;
        }

        .visit-hd .res-wrapper .active{
            background-color: #ef8ab4;
        }
        
        .me-send {
            width: 40%;
            height: .32rem;
            line-height: .32rem;
            background-color: #dfdfdd;
            text-align: center;
            border-radius: .16rem;
        }
        
        .visit-bd .visit-title {
            display: flex;
            height: .8rem;
            background-color: #ef8ab4;
            align-items: center;
        }
        
        .visit-bd .visit-title .icon {
            width: .6667rem;
            height: .6667rem;
            margin: 0 .1333rem 0 .2133rem;
        }
        
        .visit-bd .visit-title .icon img {
            width: .6667rem;
            height: .6667rem;
        }
        
        .visit-bd .visit-title .tt {
            font-size: .1867rem;
            color: #fff;
        }
        
        .visit-bd .visit-cont {
            margin: .2133rem .32rem;
            font-size: .1867rem;
            color: #646464;
            ;
        }
        
        .visit-bd .visit-cont li {
            margin-bottom: .1333rem;
        }
        
        .visit-bd .visit-cont .my-icon {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .visit-bd .visit-cont li .icon {
            display: flex;
            height: .5rem;
            line-height: .5rem;
        }
        
        .visit-bd .visit-cont li .icon img {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            border: .0133rem solid #ccc;
        }
        
        .visit-bd .visit-cont li .icon .my-name {
            margin-left: .32rem;
            font-weight: 700;
            color: #000;
            font-size: .4rem;
        }
        
        .visit-bd .visit-cont li .val {
            color: #676767;
        }
        
        .visit-bd .visit-cont li .hei {
            color: #000;
        }

        .visit-bd .visit-cont li .amount{
            height: 1.1467rem;
            line-height: 1.1467rem;
            background-color: #ee92b7;
            border-radius: .1333rem;
            font-size: .6667rem;
            font-weight: 700;
            color: #fff;
            padding-left: .2667rem;
            margin-bottom: .2rem;
        }

        .visit-bd .visit-cont li .my-type{
            float: left;
        }

        .visit-bd .visit-cont li .my-channel{
            float: right;
            margin-right: .4rem;
        }

        .visit-bd .visit-cont li .comment{
            font-size: .24rem;
            color: #000;
            /* font-weight: 700; */
        }
        
        .visit-img-container {
            display: flex;
            margin-bottom: .2133rem;
        }
        
        .visit-img-container .visit-img {
            width: 33.33%;
            padding-left: .1875rem;
        }
        
        .header .header-right a img {
            width: .3733rem;
            height: .3733rem;
        }


        .empeyOrder {
            background-color: #fff;
            position: absolute;
            bottom: 0;
            top: 0.8rem;
        }

        .empeyOrder img {
            width: 100%;
            margin-top: 20vh;
        }

        .empeyOrder span {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            padding-bottom: 0.266667rem;
        }
    </style>

    <title>感谢函 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">感谢函 - 孝邻会</div>
                <div class="header-right">
                    <a href="#">
                        <img src="../../static/assets/images/res/13.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <div class="visit-hd">
                <div class="res-wrapper">
                    <a href="#" id="myOut" class="me-come active">发出记录</a>
                    <a href="#" id="myIn"class="me-from">收到记录</a>
                </div>
                <a href="addthanks.html" class="me-send">发起函</a>
            </div>

            <div class="visit-bd inBox">
            </div>
            <div class="visit-bd outBox">
            </div>

<!--            <div class="visit-bd">-->
<!--                <div class="visit-title">-->
<!--                    <div class="icon">-->
<!--                        <img src="../../static/assets/images/res/4.png" />-->
<!--                    </div>-->
<!--                    <div class="tt">-->
<!--                        <p>发出者：<strong>高想</strong></p>-->
<!--                        <p>日期： 20/06/22 11:46</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="visit-cont">-->
<!--                    <ul>-->
<!--                        <li>接收人</li>-->
<!--                        <li class="my-icon">-->
<!--                            <div class="icon">-->
<!--                                <img src="../../static/mobile/default/images/defheadimg.jpg" alt="" />-->
<!--                                <span class="my-name">高翔</span>-->
<!--                            </div>-->
<!--                            <span>合伙人</span>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            引荐的金额是：-->
<!--                            <div class="amount">-->
<!--                                ¥&nbsp;8550-->
<!--                            </div>-->
<!--                        </li>-->
<!--                        <li class="clearfix">-->
<!--                            <div class="my-type">-->
<!--                                生意类型-->
<!--                                <h3 class="hei">重复的生意</h3>-->
<!--                            </div>-->
<!--                            <div class="my-channel">-->
<!--                                资源渠道-->
<!--                                <h4 class="hei">内部</h4>-->
<!--                            </div>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            评语：-->
<!--                            <p class="comment">-->
<!--                                感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢感谢-->
<!--                                谢感谢感谢感谢感谢感谢-->
<!--                            </p>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
        </div>

        <script id="TagTpl" type="text/html">
            {{each data as result index}}
            <div class="visit-bd">
                <div class="visit-title">
                    <div class="icon">
                        <img src="../../static/assets/images/res/4.png" />
                    </div>
                    <div class="tt">
                        <p>{{if result.direction == 'out'}}发出{{else}}接收{{/if}}者：<strong>{{result.ownerName}}</strong></p>
                        <p>日期： {{result.addTimeStr}}</p>
                    </div>
                </div>
                <div class="visit-cont">
                    <ul>
                        <li>{{if result.direction == 'out'}}接收{{else}}发出{{/if}}者（<strong>{{if result.thksType == 2}}<span style="color: red">健康</span>{{else}}事业{{/if}}</strong>）</li>
                        <li class="my-icon">
                            <div class="icon">
                                <img src="{{result.userIcon}}" alt="" />
                                <span class="my-name">{{result.userName}}</span>
                            </div>
                            <span>{{result.levelName}}</span>
                        </li>
                        <li>
                            引荐的金额是：
                            <div class="amount">
                                ¥&nbsp;{{result.busiAmount}}
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="my-type">
                                生意类型
                                <h3 class="hei">
                                    {{if result.thksType == 2}}
                                    {{if result.adjustStage == 3}}调理阶段{{else if result.adjustStage == 2}}深度排毒{{else}}产品复购{{/if}}
                                    {{else}}
                                    {{if result.busiType == 2}}重复的生意{{else}}新的生意{{/if}}
                                    {{/if}}

                                </h3>
                            </div>
                            <div class="my-channel">
                                {{if result.thksType == 2}}
                                与你关系
                                {{else}}
                                资源渠道
                                {{/if}}
                                <h4 class="hei">
                                    {{if result.thksType == 2}}
                                    {{if result.relation == 2}}朋友{{else}}家人{{/if}}
                                    {{else}}
                                    {{if result.channel == 3}}三层或以上
                                    {{else if result.channel == 2}}外部
                                    {{else}}内部{{/if}}</h4>
                                    {{/if}}
                            </div>
                        </li>
                        <li>
                            评语：
                            <p class="comment">
                                {{result.comment}}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            {{/each}}
        </script>
        <!-- 没有热门需求-->
        <script type="text/html" id="emptyTpl">
            <div class="empeyOrder">
                <img src="../../static/mobile/default/images/emptyData.png" alt="">
                <span class="fs28 color_3">暂无记录</span>
            </div>
        </script>

        <!-- 版权 -->
        <div class="copyright">
            Copyright © 达漂亮<br>
        </div>

    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- js -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>
    <script src="../../static/js/art-template.js"></script>
    <script src="../../static/mobile/default/js/lib/fastclick.js"></script>
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>

    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/js/jquery/lazyload/jquery.lazyload.js"></script>

    <!-- 页面js部分 -->
    <script>
        var nowPage = [],getAgain = [],isLoadend = [];// 这里用数组的原因是可能有tab
        var _type = 'in';
        function getList(isagain, direction) {
            page = nowPage[_type];// 找不到all的属性，page的结果是undefined
            if (typeof(page) == 'undefined') page = 1;// 初始化为第一页
            if (isLoadend[_type] == true ) return false;// 如果到底了，就不在请求了
            // 重新请求
            if (isagain == true){
                if (getAgain[_type] == false) return false;// 内部标记为false，就不用再重新请求了
                getAgain[_type] = false;// 不用再重新请求了
            }else{
                // 显示加载中
                $('.'+_type+'Box').append('<div class="get_list_tip" data-type="'+_type+'">加载数据中...</div>');
            }
            // 默认就到底了
            isLoadend[_type] = true;

            if(!direction){
                direction = "in";
            }

            $.ajax({
                url:'https://mp.jianguoes.com/api/res/thanksPageList',// 跳转到 action
                data:{page:page,size:10, direction:direction},
                type:'get',
                headers:{'token': $.cookie('code')},
                dataType:'json',
                success:function(res) {
                    // 成功后，表示还没有到底
                    isLoadend[_type] = false;
                    if(res.errno  != 0 ){
                        _alert(res.errmsg);
                        // 获取数据失败，需要重新获取
                        getAgain[_type] = true;
                        $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                        return false;
                    }

                    $('.'+_type+'Box').find('.get_list_tip').remove();
                    if (res.data.data.length>0){

                        $('.'+_type+'Box').append(template('TagTpl',res.data));
                    }else{
                        $('.'+_type+'Box').html(template('emptyTpl'));
                    }

                    if (res.data.totalPages == page) {
                        $('.'+_type+'Box').append('<div class="get_list_tip">---我也有底线的---</div>');
                        // 真的到底了
                        isLoadend[_type] = true;
                    }else{
                        // 请求下一页
                        nowPage[_type] = page+1;
                    }
                },error : function() {
                    // 还没有到底
                    isLoadend[_type] = false;
                    // 要重新请求
                    getAgain[_type] = true;
                    $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                }
            });
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            // 解决移动端浏览器 300 毫秒点击延迟问题
            FastClick.attach(document.body);

            // 默认请求
            _type = 'out';
            getList(true, 'out');

            // 重新请求数据
            $(document).on('click','.get_list_tip',function () {
                _type = $(this).data('tag_id');
                getList(true);
            });

            $("#myIn").on('click',function () {
                $("#myIn").addClass("active");
                $("#myOut").removeClass("active");
                _type = 'in';
                getList(true, 'in');

                $('.inBox').show();
                $('.outBox').hide();
            });

            $("#myOut").on('click',function () {
                $("#myOut").addClass("active");
                $("#myIn").removeClass("active");

                _type = 'out';
                getList(true, 'out');

                $('.outBox').show();
                $('.inBox').hide();
            });

            // 页面下拉事件
            $('.page-bd').scroll(function(){
                var box_h=$(this).height()
                var content_h=$('.scrollBox').height()
                var scroll_h=$(this).scrollTop();
                if(content_h-box_h-scroll_h<20){
                    getList();
                }
            });
        });
    </script>
</body>

</html>